<template>
	<view>
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<view class="flex-center">
					<x-back-btn></x-back-btn>
					<view class="flex-center u-m-l-18" @click="jumpUrl(`/pages/user/personal/index/index?userId=${ dataInfo.userId }`)">
						<view class="u-avatar-48 clear-flex">
							<x-image :src="showImage(dataInfo.userAvatar, 'logo')"/>
						</view>
						<view class="u-m-l-12 u-f-32 u-lh-36 font-medio">{{ dataInfo.userNick || '' }}</view>
					</view>
				</view>
				<view v-if="dataInfo.userId !== userInfo.userId" class="follow-btn u-m-r-14 u-f-24 u-lh-34 u-text-center flex-center-center" @click="updateInfo(2)">
					<view>{{ lang_common[dataInfo.hasFollew ? 'cancelFollow' : 'follow'] }}</view>
				</view>
			</view>
		</view>

		<view>
			<mescroll-body height="calc(100vh - 370rpx)" ref="mescrollRef" @init="mescrollInit" @down="downCallback"
				@up="upCallback">
				<view>
					<view>
						<swiper class="swiper" :current="swiperIndex" @change="changeSwiper">
							<swiper-item v-for="(item, index) in swipers" :key="index">
								<view class="swiper-item u-text-center"
									style="position: relative; margin: 0 auto;background: #f5f5f5; height: 866rpx" @click="previewAction(item, index)">
									<x-image :src="showImage(item.type === 'video' ? item.cover : item.fileUrl, 'logo')" mode="heightFix"/>
									<view class="video-play-icon" v-if="item.type === 'video' && item.percent === 100">
										<image src="@/static/image/common/video_play.png" class="auto-img"></image>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>

					<!-- 指示点 -->
					<view v-if="swipers.length > 1" class="flex-center-center u-m-t-18" style="width: 100%">
						<view class="flex-center-center">
							<view v-for="(item, index) in swipers" :key="index" :class="['swiper-dot', 
							index === swiperIndex ? 'swiper-dot-active' : '',
							index > 0 ? 'u-m-l-10' : ''
							]" @click="swiperIndex = index"></view>
						</view>
					</view>

					<!-- 文章 -->
					<view style="padding: 0 22rpx">
						<!-- 标题 -->
						<view class="u-f-34 u-lh-48 font-medio">{{ dataInfo.title || '' }}</view>

						<!-- 内容 -->
						<view class="u-f-32 u-lh-44 u-m-t-24">
							<view v-html="dataInfo.content || ''" style="white-space:pre-wrap;"></view>
						</view>

						<!-- 店家卡片 -->
						<view v-if="dataInfo.merchant" class="u-m-t-20">
							<shop-card background="#F9F9F9" :item="({ ...dataInfo.merchant, merchantId: dataInfo.merchantId })" @phone="settingValue = 'contact'"></shop-card>
						</view>

						<!-- 页脚 -->
						<view class="u-f-24 u-lh-34 color-grew flex-center u-m-t-24 u-p-b-24">
							<view class="u-m-r-16">
								{{ lang_common.publishedIn }}{{ dayjs(dataInfo.createTime || dayjs()).format('YYYY/MM/DD HH:mm:ss') }}
							</view>
							<view>|</view>
							<view class="u-m-l-16">{{ lang_common.visitors }}
								{{ formatNumber(dataInfo.accessCount || 0) }}
							</view>
						</view>
					</view>

					<!-- 分割线 -->
					<u-gap height="7" bgColor="#F9F9F9"></u-gap>

					<!-- 查看点赞详情 -->
					<view class="flex-center-between" style="padding: 20rpx 24rpx 24rpx 32rpx"
						@click="jumpUrl(`/pages/user/note/liked/liked?notesId=${ notesId }`)">
						<view class="u-f-32 u-lh-44 font-medio">{{ lang_common.see_liked }}</view>

						<x-see-more></x-see-more>
					</view>

					<!-- 分割线 -->
					<u-gap height="7" bgColor="#F9F9F9"></u-gap>

					<!-- 评论列表 -->
					<view style="padding: 34rpx 32rpx 0">
						<!-- 评论数量 -->
						<view class="u-f-32 u-lh-44 font-medio">{{ lang_common.comment }} ({{ total }})</view>

						<view>
							<comment-item v-for="(item, index) in dataList" :key="index"
								:class="[`u-p-t-${ index ? 40 : 24 }`]" :item="item" :is-shop="userType === 'shop'"
								:user-id="dataInfo.userId" @change="commentAction" @update="downCallback()">
							</comment-item>
						</view>
					</view>

					<view style="height: 200rpx"></view>
				</view>
			</mescroll-body>
		</view>

		<!-- 回复框 -->
		<view v-if="userType === 'user'" class="reply-container u-safe-area-inset-bottom" @touchend.stop="() => {}">
			<view class="flex-center-between" style="padding: 20rpx 0 20rpx 32rpx">
				<view class="flex-center reply-box" style="width: 100%">
					<image v-if="!keyboardHeight" src="@/static/image/common/edit.png"
						style="width: 32rpx; height: 32rpx;" class="u-m-r-6"></image>
					<view class="u-f-32 u-lh-44 reply-content" style="width: 100%; color: #636363"
						@click="childComment = null">
						<input v-model="inputContent" :placeholder="lang_common.saySomething" style="width: 100%" :focus="isFocus"
							@blur="isFocus = false" />
					</view>
				</view>

				<view class="flex">
					<!-- 状态切换，有内容显示发送，没有显示点赞和收藏 -->
					<view v-if="!inputContent" class="flex-center">
						<view class="flex-center u-m-l-34" @click="updateInfo(1)">
							<u-icon :name="'liked' + (dataInfo.hasLiked ? '-active' : '')" custom-prefix="u" size="32"
								:color="dataInfo.hasLiked ? likedColor : defaultColor"></u-icon>
							<view class="u-m-l-16 u-f-30 u-lh-34" style="width: 80rpx;">
								{{ formatNumber(dataInfo.likeCount || 0) }}
							</view>
						</view>

						<view class="flex-center" @click="updateInfo(9)">
							<u-icon :name="'star' + (dataInfo.collectActionId ? '-active' : '')" custom-prefix="u"
								size="32" :color="dataInfo.collectActionId ? likedColor : defaultColor"></u-icon>
							<view class="u-m-l-16 u-f-30 u-lh-34" style="width: 80rpx;">
								{{ formatNumber(dataInfo.collectCount || 0) }}
							</view>
						</view>
					</view>

					<view v-else style="padding: 0 30rpx 0 22rpx;">
						<x-common-btn width="148" height="76" @click="sendComment">{{ lang_common.send }}</x-common-btn>
					</view>
				</view>
			</view>
		</view>
		
		<permission-unAuthTips v-model="settingValue"></permission-unAuthTips>
	</view>
</template>

<script>
	import {
		notesInfo
	} from '@/api/user/notes.js'

	import {
		commentInfo,
		commentNotesPage,
		commentCommentNotes,
		commentComment
	} from '@/api/user/comment.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";

	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				defaultColor: '#BFBFC1',
				likedColor: '#F94404',

				commentId: '',
				notesId: '',
				dataInfo: {},
				userType: 'user',

				dataList: [],
				total: 0,

				swiperIndex: 0,

				isFocus: false,
				inputContent: '',
				
				settingValue: ''
			}
		},
		computed: {
			// 转换轮播
			swipers() {
				let urls = this.dataInfo.imgUrls || ''
				return this.dealImage(urls)
			},
			// 是否展示编辑图标
			showEditIcon() {
				return (this.isFocus || this.inputContent) ? false : true
			}
		},
		watch: {
			keyboardHeight: {
				handler(v) {
					this.isFocus = !!v
				},
				deep: true,
				imeediate: true
			}
		},
		onLoad({
			type,
			notesId
		}) {
			// 类型shop商家显示右上角删除按钮
			this.userType = type || 'user'
			this.notesId = notesId
			this.initInfo()
			this.actionAction(7, {
				notesId
			})
		},
		methods: {
			// 轮播变化后
			changeSwiper({
				detail: {
					current
				}
			}) {
				this.swiperIndex = current
			},
			updateInfo(type) {
				this.actionAction(type, this.dataInfo).then(() => {
					this.initInfo()
				})
			},
			// 触发回复
			commentAction(data) {
				this.isFocus = true
				this.childComment = data
			},
			// 发送评论
			sendComment() {
				if (this.inputContent) {
					if (this.childComment) {
						let {
							parentId,
							commentId,
							userId
						} = this.childComment
						commentComment({
							parentId: parentId || commentId,
							toUserId: userId,
							content: this.inputContent
						}).then(result => {
							this.inputContent = ''
							this.downCallback()
						})
					} else {
						commentCommentNotes({
							notesId: this.notesId,
							content: this.inputContent,
							noteTitle: this.dataInfo.title
						}).then(res => {
							this.inputContent = ''
							this.downCallback()
						})
					}
				}
			},
			// 点击轮播触发
			previewAction(item, index) {
				if (!item.fileUrl) return;
				if (item.type === 'video') {
					this.jumpUrl('/pages/other/videoshow/videoshow?url=' + encodeURIComponent(item.fileUrl))
				} else {
					uni.previewImage({
						urls: [this.baseUrl + item.fileUrl]
					})
				}
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				let node = this.$refs['mescrollRef']
				commentNotesPage({
					pageNumber: page.num,
					pageSize: page.size,
					notesId: this.notesId
				}).then(res => {
					console.log(res)
					this.total = res.totalRow || 0
					node && node.mescroll.endSuccess(res.list.length);
					if (page.num == 1) this.dataList = []; //如果是第一页需手动制空列表
					this.dataList = this.dataList.concat(res.list); //追加新数据
				}).catch(() => {
					node && node.mescroll.endErr();
				})
			},
			downCallback() {
				let node = this.$refs['mescrollRef']
				node && node.mescroll.resetUpScroll()
			},
			// 初始化详情
			initInfo() {
				notesInfo({
					notesId: this.notesId
				}).then((result) => {
					this.dataInfo = {...result}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.follow-btn {
		width: 114rpx;
		height: 46rpx;
		color: #FD2E58;
		border: 2rpx solid #FD2E58;
		border-radius: 100rpx;
	}
	
	.swiper {
		height: 866rpx;

		&-dot {
			width: 14rpx;
			height: 14rpx;
			border-radius: 14rpx;
			background-color: #E4E4E4;

			&-active {
				background-color: #FD2E58
			}
		}
	}
	
	.video-play-icon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 10204;
		width: 100rpx;
		height: 100rpx;
	}

	.reply {
		&-container {
			position: sticky;
			left: 0;
			bottom: 0;
			background-color: #ffffff
		}

		&-box {
			padding: 20rpx 24rpx;
			border-radius: 100rpx;
			background-color: #F4F4F4;
		}

		&-content {}
	}
</style>
